<!-- cmx 12.03绑定手机号页面 -->
<template>
	<view class="container">
		<view class="phone-form">
			<!-- 手机号码输入框 -->
			<uni-forms ref="formRef" :model="form" :rules="rules">
				<uni-forms-item name="phoneNumber">
					<input type="text" placeholder="请输入手机号码" v-model="form.phoneNumber" />
				</uni-forms-item>
				<!-- 验证码输入框-->
				<uni-forms-item name="verificationCode" class="codewrap">
					<input class="code" type="text" placeholder="请输入验证码" v-model="form.verificationCode" />
					<!-- 获取验证码按钮 -->
					<!-- <button @click="getVerificationCode">获取验证码</button> -->
					<span class="getCode" @click="getVerificationCode">获取验证码</span>
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- 下一步按钮 -->
		<button @click="nextStep">更改</button>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	const form = ref({}); // 使用ref来存储新的昵称
	const formRef = ref();
	const rules = ref({
		phoneNumber: {
			rules: [{
				required: true,
				errorMessage: '请输入电话'
			}, {
				minLength: 11,
				maxLength: 11,
				errorMessage: '电话号长度必须为11位'
			}, {
				pattern: /^1[34578]\d{9}$/g,
				errorMessage: '手机格式不正确'
			}]
		},
		verificationCode: {
			rules: [{
				required: true,
				errorMessage: '请输入验证码'
			}]
		}
	})

	// 获取验证码的方法
	const getVerificationCode = async () => {
		// 这里可以添加发送请求到服务器获取验证码的逻辑
		// 假设服务器返回的验证码是 '1234'
		const isValid = await formRef.value.validateField('phoneNumber');
		if (!isValid) {
			console.error('表单验证失败');
			return;
		} else {
			form.value.verificationCode = '1234'; // 将验证码赋值给verificationCode，自动更新输入框
		}
	}
	const nextStep = async () => {
		const isValid = await formRef.value.validate();
		if (isValid) {
			console.log('表单验证成功');
			const value = JSON.parse(uni.getStorageSync('id'));
			const userId = value[0].id;
			console.log(userId);
			const res = await uni.request({
				url: `http://localhost:8080/user/updatePhone`, // 使用模板字符串构建URL
				method: 'post', // 更新S操作通常使用POST方法
				header: {
					'content-type': 'application/x-www-form-urlencoded' // 设置内容类型为表单数据
				},
				data: {
					id: userId,
					tel: form.value.phoneNumber
				},
				success: (response) => {
					if (response.statusCode === 200) {
						console.log('手机号码更新成功', response.data);
						uni.showToast({
							title: '手机号码更新成功',
							icon: 'success'
						});
						uni.reLaunch({
							url: "/pages/account/settings"
						});
					} else {
						console.error('手机号码更新失败', response.data);
						uni.showToast({
							title: '手机号码更新失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('请求失败', err);
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					});
				}
			});
		} else {
			console.error('表单验证失败');
		}

	};
</script>

<style>
	.container {
		padding: 20px 0;
	}

	.phone-form {
		margin-top: -15px;
		background-color: white;
		/* margin-bottom: 10px; */
	}

	.getCode {
		position: relative;
		font-size: 14px;
		width: 100px;
		/* 固定宽度 */
		height: 30px;
		/* 固定高度 */
		padding: 5px;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		margin-top: -40px;
		/* 调整按钮与输入框的垂直间距 */
		margin-left: auto;
		/* 将按钮放置在输入框的右侧 */
	}

	input:nth-of-type(1) {
		padding: 10px;
		margin-top: 10px;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		border-radius: 4px;
	}

	.code {
		border-top: 1px solid #ccc;

	}


	button {
		background-color: #4CAF50;
		color: white;
		border: none;
		cursor: pointer;
		margin-top: 30px;
		margin-left: 10px;
		margin-right: 10px;
	}

	button:hover {
		background-color: #45a049;
	}
</style>